.navigation {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: -$navigation-bar-width;
  width: $navigation-bar-width;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid lighten($gray, 30%);
  background: white;
}

.navigation-folders {
  flex: none;
  padding: 10px 0;
}

.navigation-tags {
  display: flex;
  height: 100%;
  flex-direction: column;
  flex: 0 1 auto;
  overflow: hidden;
  min-height: 9em;
  padding: 12px 0 0;
  border-top: 1px solid lighten($gray, 30%);

  .tag-list-title {
    padding: 8px 20px 0;
  }

  .editable-list-item {
    padding: 0 5px 0 20px;
  }
}

.navigation-tools {
  flex: 1 0 auto;
  padding: 10px 0;
  border-top: 1px solid lighten($gray, 30%);
}

.navigation-footer {
  display: flex;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20px 20px 20px;
  color: darken($gray, 20%);
}

.is-electron {
  .navigation-tools,
  .navigation-footer {
    display: none;
  }
}

.navigation-footer-item {
  margin-right: 10px;

  &:last-child {
    margin-right: 0;
  }
}
